@use "../../utils/mixins";

// Pagination

@mixin output {
  .handsontable {
    &.ht-pagination {
      color: var(--ht-pagination-bar-foreground-color);
      background: var(--ht-pagination-bar-background-color);
      border: 1px solid var(--ht-wrapper-border-color);
      border-top-color: transparent;
      border-radius: 0 0 var(--ht-wrapper-border-radius) var(--ht-wrapper-border-radius);
      font-size: var(--ht-font-size);
      line-height: var(--ht-line-height);
      box-sizing: border-box;
      overflow-x: auto;

      &--bordered {
        border-top-color: var(--ht-wrapper-border-color);
      }

      .ht-pagination__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: calc(var(--ht-gap-size) * 4);
        border-radius: 0 0 var(--ht-wrapper-border-radius) var(--ht-wrapper-border-radius);
        padding-inline: var(--ht-pagination-bar-horizontal-padding);
        padding-block: var(--ht-pagination-bar-vertical-padding);
        min-width: 230px;
      }

      .ht-page-size-section {
        display: flex;
        align-items: center;
        gap: calc(var(--ht-gap-size) * 2);

        &__label {
          white-space: nowrap;
        }

        &__select-wrapper {
          position: relative;
          border-radius: var(--ht-input-border-radius);

          select {
            padding-inline-start: var(--ht-gap-size);
            padding-inline-end: calc(var(--ht-gap-size) + var(--ht-icon-size));
            padding-top: var(--ht-gap-size);
            padding-bottom: var(--ht-gap-size);
            border-radius: var(--ht-input-border-radius);
            color: var(--ht-input-foreground-color);
            background-color: var(--ht-input-background-color);
            border: 1px solid var(--ht-input-border-color);
            line-height: calc(var(--ht-line-height) - 4px);
            -webkit-appearance: none;
            font-size: inherit;
            cursor: pointer;

            &:disabled {
              opacity: 0.4;
              cursor: default;
              color: var(--ht-input-disabled-foreground-color);
              background-color: var(--ht-input-disabled-background-color);
              border-color: var(--ht-input-disabled-border-color);
            }

            &:hover:not(:disabled) {
              color: var(--ht-input-hover-foreground-color);
              background-color: var(--ht-input-hover-background-color);
              border-color: var(--ht-input-hover-border-color);
            }

            &:focus {
              color: var(--ht-input-focus-foreground-color);
              background-color: var(--ht-input-focus-background-color);
              border-color: var(--ht-input-focus-border-color);
              outline: none;
            }
          }

          &::after {
            @include mixins.pseudo;

            position: absolute;
            inset-inline-end: var(--ht-gap-size);
            inset-block-end: 50%;
            transform: translateY(50%);
            background-color: var(--ht-foreground-color);
            pointer-events: none;
          }
        }
      }

      .ht-page-counter-section {
        margin-inline-end: auto;
      }

      .ht-page-navigation-section {
        display: flex;
        align-items: center;
        gap: 1px;

        &__button {
          font-size: inherit;
          border: 1px solid var(--ht-pagination-bar-background-color);
          color: var(--ht-secondary-button-foreground-color);
          background-color: var(--ht-pagination-bar-background-color);
          border-radius: var(--ht-icon-button-large-border-radius);
          padding: var(--ht-icon-button-large-padding);
          cursor: pointer;

          &::before {
            @include mixins.pseudo;
          }

          &--disabled {
            cursor: default;
            pointer-events: none;
            color: var(--ht-secondary-button-disabled-foreground-color);
          }
 
          &:hover:not(:disabled) {
            background-color: var(--ht-secondary-button-hover-background-color);
          }

          &:focus {
            outline: none;
            border: 1px solid var(--ht-accent-color)
          }
        }

        &__label {
          white-space: nowrap;
          min-width: 100px;
          text-align: center;
        }
      }
    }

    &.ht-wrapper {
      &.htPagination {
        border-end-start-radius: 0;
        border-end-end-radius: 0;

        .htCore {
          border-end-start-radius: 0;
          border-end-end-radius: 0;

          thead tr:last-child th:first-child,
          tbody tr:last-child td:first-child,
          tbody tr:last-child th:first-child {
            border-end-start-radius: 0 !important;
          }

          thead tr:last-child th:last-child,
          tbody tr:last-child td:last-child,
          tbody tr:last-child th:last-child {
            border-end-end-radius: 0 !important;
          }
        }
      }
    }
  }
}
